import { Component, Vue, Prop } from 'vue-property-decorator';
import moment from 'moment';

/** 可编辑表格（一般用于table） */
@Component({})
export default class editableCell extends Vue {
  /** 当前表格行数 */
  @Prop({
    required: false,
    default: '',
  }) index!: number;
  /** 当前表格绑定的key */
  @Prop({
    required: false,
    default: '',
  }) cellKey!: string | number;
  /** 当前表格显示的值 */
  @Prop({
    required: false,
    default: '',
  }) text!: string | number;
  /** 当前类型 */
  @Prop({
    required: false,
    default: 'input',
  }) type!: string;

  /** 输入框绑定值 */
  value: string | number = this.text;
  /** 当前表格是否可编辑 */
  editable: boolean = false;

  moment = moment;

  created() {
    this.value = this.text;
  }

  changeStatus(status?: boolean) {
    if (status === this.editable) return;
    if (this.editable) {
      this.$emit("onCellChange", { key: this.cellKey, value: this.value, index: this.index });
      this.editable = false;
    } else {
      this.editable = true;
      this.$nextTick(() => {
        (this.$refs.cellInput as any)?.focus();
      })
    }
  }

  onDateChange(moment: any, time: string) {
    this.value = time;
    this.changeStatus(false);
  }
}
